<template>
	<view class="tab-main">
		<view class="tabs" :class="{ spaceCenter: tabList.length === 1 }">

			<view class="tab-item" :class="{ active: currentIndex === index }" v-for="(item, index) in tabList"
				:key="index" @click.stop="handleTab(item, index)">
				<view class="text">{{ item.label }}</view>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		props: {
			modifyType: {
				type: String,
				default: "",
			},
		},
		computed: {
			tabList() {
				return this.tabs.filter((item) => item.show);
			},
		},
		data() {
			return {
				currentIndex: 0,
				tabs: [{
						label: "所有任务",
						type: "alltask",
						show: true,
					},
					{
						label: "已接收任务",
						type: "receivetask",
						show: true,
					},
					{
						label: "历史已完成",
						type: "historytask",
						show: true,
					},
				]
			};
		},
		onLoad() {
			
		},
		methods: {
			handleTab(item, index) {
				console.log(index)
				this.currentIndex = index
				if (this.currentIndex === index) {
					return;
				}

			},
		},
		mounted() {
			if (this.modifyType.length) {
				// this.currentIndex = this.tabList.findIndex(
				//   (item) => item.type === this.modifyType
				// );
			}
		},
	};
</script>

<style lang="scss" scoped>
	.tab-main {
		position: fixed;
		z-index: 9999;
		width: 100%;
		bottom: 0;
		left: 0;
		background: #ffffff;
		box-shadow: 0rpx -1rpx 0rpx 0rpx #ebedf0;

		.tabs {
			display: flex;
			height: 120rpx;

			.tab-item {
				background: #ffffff;
				width: 33.333%;
				display: flex;
				align-items: center;
				flex-direction: column;

				.text {
					margin-top: 20px;
					font-size: 13px;
					font-weight: 500;
					color: #5475ff;
					line-height: 24px;
				}
			}

			.tab-item.active {
				.text {
					color: #ffffff;
				}

				background: #5475ff;
			}
		}

		.spaceCenter {
			justify-content: center;
		}
	}
</style>